
<!-- 咨询分类 -->

<script setup>
import { getConsultApi, getContentCateApi, getdelContentCateListApi, getContentCateListApi, getEditContentCateListApi } from '@/api/consult'
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
// ===========================================
// 弹出层
const isShow = ref(false)
// 关闭事件
const closeHandler = () => { }
// ===========================================

// 创建列表功能
const queryData = reactive({
  current: 1, //每页的页码
  pageSize: 3, //每页数量
  catename: '', //分类名

})
// ===========================================
const total = ref(0)
const list = ref([])
const initData = async () => {
  const { data: { rows, count } } = await getConsultApi(queryData)
  // console.log(rows, count);
  total.value = count
  list.value = rows
}

// ============================================
onMounted(() => {
  initData()
})
// ===========================================
// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val
  initData()
}
// //页码切换
const currentChange = (val) => {
  queryData.current = val
  initData()
}
// ============================================
// 新增区域绑定
const formData = reactive({
  catename: '', //分类名
})
// ===========================================
// 新增区域表单验证规则
const fromRules = {
  catename: [{ required: true, message: '请输入', trigger: 'blur' }],
}
// 表单校验
const formRef = ref()
// ==========================================
// 提交按钮表单校验
const onSubmit = async () => {
  try {
    // 提交校验
    await formRef.value.validate()
    // 提交数据
    const data = toRaw(formData)
    formData.id ? await getEditContentCateListApi(data) : await getContentCateApi(data)
    // await getContentCateApi(toRaw(formData))
    // 提示成功
    ElMessage.success('增加成功')
    // 关闭弹窗
    isShow.value = false
    // 列表刷新
    // console.log(1111);
    initData()
  } catch (error) {
    console.log(error);
  }
}
// ============================================
// 编辑功能
const editRow = id => {
  // isShow.value = true
  replyData(id)
}
// // 编辑功能
const addRef = ref()
// // 数据回显
const replyData = async (id) => {
  // alert(id)
  let { data } = await getContentCateListApi(id)
  // console.log(res);
  Object.assign(formData, data)
  isShow.value = true
}
// 标题
const title = computed(() => {
  return formData.id ? '编辑广告' : '新增广告'
})
// 删除功能
const delRow = async (id) => {
  // alert(id)
  await getdelContentCateListApi(id)
  ElMessage.success('删除成功')
  if (queryData.pageSize > 1 && list.value.length === 1) queryData.current--
  initData()
}
// 关闭抽屉
const closeDra = async () => {
  Object.assign(formData, {
    catename: '', //分类名
  })
  await nextTick(() => {
    formRef.value.resetFields()
  })
}
</script>

<template>
  <div>
    <span>
      <h3 style="font-weight: 700; display: inline-block;">咨询分类</h3>
      对于文章的进行的相关分类
    </span>
    <!-- 工具区域 -->
    <el-card>
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" size="small" @click="isShow = true">新增分类</el-button>
        </div>
      </el-row>
      <br>
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="ID"></el-table-column>
        <el-table-column label="分类名" align="center">
          <template #default="{ row }">
            {{ row.catename }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button size='small' @click="editRow(row.id)" type="text">编辑</el-button>
            <el-popconfirm title="确定删除嘛?" @confirm="delRow(row.id)">
              <template #reference>
                <el-button size='small' type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination small="true" @size-change="sizeChange" @current-change="currentChange"
        v-model:current-page="queryData.current" :page-sizes="[3, 5, 10]" v-model:page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
        :pager-count="7">
      </el-pagination>
      <!-- 内容区域 -->
      <!-- 弹出框 -->
      <el-dialog :title="title" v-model="isShow" width="35%" @close="closeDra">
        <!-- 新增 -->
        <el-form label-width="80px" :inline="false" size="normal" :model="formData" :rules="fromRules" ref="formRef">
          <el-form-item label="分类名称" prop="catename">
            <el-input v-model="formData.catename"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="right">
              <el-button size="small">取消</el-button>
              <el-button size="small" type="primary" @click="onSubmit">确定</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<style>
.right {
  margin-left: 304px;
}
</style>
